<template>
  <h2>Virtual Scroll Item slot ref</h2>
  <v-select
    :items="items"
    item-title="name"
    label="User"
    v-for="item in selectArr"
  >
    <template v-slot:item="{ props, item }">
      <v-list-item v-bind="props" :subtitle="item.raw.department" />
    </template>
  </v-select>
  <!-- <button @click="selectArr.push(1)">Add Select</button> -->

  <h2>VMenu activator ref</h2>
  <v-tooltip v-for="item in selectArr" text="Tooltip">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props">Tooltip</v-btn>
    </template>
  </v-tooltip>

  <br>
  <br>
  <br>
  <br>
  <h2>VDatePickerYears year slot ref</h2>
  <v-date-picker-years v-for="item in selectArr">
    <template v-slot:year="{ props }">
      <v-btn v-bind="props">year</v-btn>
    </template>
  </v-date-picker-years>
</template>

<script>
  export default {
    data: () => ({
      selectArr: [1, 1],
      items: [
        {
          name: 'John',
          department: 'Marketing',
        },
        {
          name: 'Jane',
          department: 'Engineering',
        },
        {
          name: 'Joe',
          department: 'Sales',
        },
        {
          name: 'Janet',
          department: 'Engineering',
        },
        {
          name: 'Jake',
          department: 'Marketing',
        },
        {
          name: 'Jack',
          department: 'Sales',
        },
      ],
    }),
    // mounted: function () {
    //   console.log('---refs--', this.$refs.test, this.$refs.tests)
    // },
  }
</script>